<template>
  <div class="app-container">
    <div class="content">
      <div class="content_left" v-loading="loading">
        <div class="search_top">
          <el-input
            placeholder="请输入班级名称"
            clearable
            size="small"
            v-model="className"
            class="search_input"
            @keyup.enter.native="getOrganizationInfo()"
          >
          </el-input>
          <div class="search_btn">
            <el-button size="small" @click="reset">重置</el-button>
          </div>
        </div>
        <div @click="handlechange" class="btns">
          <img
            v-if="!isClose"
            src="@/assets/images/courseAdd/expand.png"
            alt="加载失败"
          />
          <img v-else src="@/assets/images/courseAdd/shrink.png" alt="加载失败"/>
          全部{{ !isClose ? '展开' : '收起' }}
        </div>
        <organizationTrees
          ref="organization_tree"
          :refreshId="refreshId"
          :refreshItem="refreshItem"
          :data="organizationTreeData"
          @updateTreeData="updateTreeData"
          @continueRefresh="continueRefresh"
          @handleClick="handleClick"
        >
        </organizationTrees>
      </div>
      <div class="content_right">
        <schoolDetial
          ref="school_detial"
          v-if="selectType == 'school'"
          :schoolId="selectId"
        ></schoolDetial>
        <branchDetial
          ref="branch_detial"
          v-if="selectType == 'branch'"
          :branchId="selectId"
        ></branchDetial>
        <majorDetial
          ref="major_detial"
          v-if="selectType == 'major'"
          :majorId="selectId"
        ></majorDetial>
        <classDetial
          ref="class_detial"
          v-if="selectType == 'class'"
          :branchId="selectBranchId"
          :branchName="selectBranchName"
          :majorName="selectMajorName"
          :classId="selectId"
        ></classDetial>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrganizationInfo } from '@/api/schoolOrganization/organization'

import branchDetial from './components/branchDetial'
import majorDetial from './components/majorDetial'
import classDetial from './components/classDetial'
import schoolDetial from './components/schoolDetial'
import organizationTrees from './components/organizationTrees'
import { formatOrganizationTreeData } from './formatOrganizationData'

export default {
  name: 'organization',
  components: {
    branchDetial,
    majorDetial,
    classDetial,
    schoolDetial,
    organizationTrees
  },
  data() {
    return {
      isClose: true,
      className: '',
      selectType: '',
      selectId: '',
      selectBranchId: '',
      selectBranchName: '',
      selectMajorName: '',
      organizationTreeData: [],
      refreshItem: null,
      refreshId: '',
      userType: {
        admin: 1,
        schoolAdmin: 2,
        branchAdmin: 3
      },
      keyId: {
        admin: 0,
        schoolAdmin: this.$store.getters.schoolId,
        branchAdmin: this.$store.getters.branchId
      }
    }
  },
  created() {
    this.getOrganizationInfo()
  },
  methods: {
    // 展开关闭操作
    handlechange() {
      this.isClose = !this.isClose
      if (this.isClose) {
        this.$refs.organization_tree.expandAll()
      } else {
        this.$refs.organization_tree.collapseAll()
      }
    },
    continueRefresh(e) {
      let keyMap = {
        branch: 'branchId',
        major: 'majorId',
        class: 'classId'
      }
      this.selectBranchId = e.branchId
      this.selectType = e.type
      this.selectId = e[keyMap[e.type]]
      if (e.type == 'class') {
        this.selectBranchName = e.branchName
        this.selectMajorName = e.majorName
      }
      if (e.type == 'branch') {
        this.$refs.branch_detial.getBranchDetial()
      }
      if (e.type == 'major') {
        this.$refs.major_detial.getMajorDetial()
      }
      if (e.type == 'class') {
        this.$refs.class_detial.getClassDetial()
      }
    },
    updateTreeData(e) {
      let keyMap = {
        branch: 'branchId',
        major: 'majorId',
        class: 'classId',
        school: 'schoolId'
      }
      let type = false
      if (e.txt == 'edit') {
        if (e.type == this.selectType && e[keyMap[e.type]] == this.selectId) {
          console.log(e[keyMap[e.type]], 'e[keyMap[e.type]]')
          if (e.type == 'branch') {
            this.$refs.branch_detial.getBranchDetial()
          }
          if (e.type == 'major') {
            this.$refs.major_detial.getMajorDetial()
          }
          if (e.type == 'class') {
            this.$refs.class_detial.getClassDetial()
          }
          if (e.type == 'school') {
            this.$refs.school_detial.getInfo()
          }
        }
      }
      if (e.txt == 'del') {
        if (e.type == this.selectType && e[keyMap[e.type]] == this.selectId) {
          type = true
        }
      }
      this.getOrganizationInfo(type)
    },
    reset() {
      this.className = ''
      this.getOrganizationInfo()
    },
    handleClick(e) {
      let keyMap = {
        branch: 'branchId',
        major: 'majorId',
        class: 'classId'
      }
      this.selectBranchId = e.branchId
      this.selectType = e.type
      this.selectId = e[keyMap[e.type]]
      if (e.type == 'class') {
        this.selectBranchName = e.branchName
        this.selectMajorName = e.majorName
      }
      console.log(e, 'handleClick')
    },
    async getOrganizationInfo(type) {
      this.loading = true
      // 是否包含admin
      let role = this.$store.getters.roleId
      let params = {
        keyId: this.keyId[role],
        userType: this.userType[role],
        className: this.className
      }
      let res = await getOrganizationInfo(params)
      const { code, data } = res
      if (code === 200) {
        this.organizationTreeData = formatOrganizationTreeData(data, role)
        if (type) {
          this.refreshId = this.organizationTreeData[0].id
          this.refreshItem = this.organizationTreeData[0]
        }

        this.loading = false
      }
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  display: flex;

  &_left {
    width: 340px;
    height: calc(100vh - 148px);
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;

    .search_top {
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;

      .search_input {
        flex: 1;
      }

      .search_btn {
        margin-left: 10px;
        width: 60px;
        display: flex;
        justify-content: flex-end;
      }
    }

    .btns {
      cursor: pointer;
      user-select: none;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      margin: 0 4px 10px 0;

      img {
        margin: 0 4px 0 0;
        width: 16px;
        height: 16px;
      }
    }
  }

  &_right {
    height: calc(100vh - 148px);
    overflow: auto;
    margin-left: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
    flex: 1;
  }
}
</style>
